<template>
  <div class="chart" ref="chartRef"></div>
</template>

<script setup>
import { nextTick, watch } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref(null)
const prop = defineProps({
  chartOption: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => prop.chartOption,
  (newVal) => {
    if (newVal) {
      nextTick(() => {
        const chart = echarts.init(chartRef.value)
        console.log(newVal);

        chart.setOption(newVal, true)
      })
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>
